<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>

// 以下为bpmn工作流绘图工具的样式
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'

import { downloadDeployStream } from "@/api/configActiviti/deploy.js";

// 引入相关的依赖
import BpmnModeler from 'bpmn-js/lib/Modeler'

export default {
    name:'TestBpmn',

    mounted() {
        this.init()

        
    },

    data() {
        return {
          // bpmn建模器
          bpmnModeler: null,
          container: null,
          canvas: null,
          xmlStr:`
          <?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.activiti.org/processdef">
  <process id="testUpload" name="测试上传流程" isExecutable="true">
    <startEvent id="sid-8c64256e-6284-4429-82b1-085553907d9f" name="开始"/>
    <userTask id="sid-2db81ad1-17d3-4684-abd9-0373c7d07060" name="专人审批" activiti:assignee="dsq"/>
    <endEvent id="sid-a399678f-22fc-4c39-a543-36f81ab62c3e" name="结束"/>
    <sequenceFlow id="sid-695d9982-391c-482b-9bf5-8f83e659ac2d" sourceRef="sid-8c64256e-6284-4429-82b1-085553907d9f" targetRef="sid-2db81ad1-17d3-4684-abd9-0373c7d07060"/>
    <sequenceFlow id="sid-979c8e38-770a-48d9-a2cf-7ac1813f956d" sourceRef="sid-2db81ad1-17d3-4684-abd9-0373c7d07060" targetRef="sid-a399678f-22fc-4c39-a543-36f81ab62c3e"/>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_testUpload">
    <bpmndi:BPMNPlane bpmnElement="testUpload" id="BPMNPlane_testUpload">
      <bpmndi:BPMNShape id="shape-86860e63-bc5e-4432-8107-ca3aa0ee3b1e" bpmnElement="sid-8c64256e-6284-4429-82b1-085553907d9f">
        <omgdc:Bounds x="-70.0" y="-45.0" width="30.0" height="30.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="shape-cebed6b6-abe0-4110-bc57-9c487b2cde0a" bpmnElement="sid-2db81ad1-17d3-4684-abd9-0373c7d07060">
        <omgdc:Bounds x="5.0" y="-70.0" width="100.0" height="80.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="shape-2cc8cb53-ab69-47e9-aa30-c6b37def6e3a" bpmnElement="sid-a399678f-22fc-4c39-a543-36f81ab62c3e">
        <omgdc:Bounds x="185.0" y="-45.0" width="30.0" height="30.0"/>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="edge-650819b8-80c5-4d84-93dc-78e55fe9601b" bpmnElement="sid-695d9982-391c-482b-9bf5-8f83e659ac2d">
        <omgdi:waypoint x="-40.0" y="-30.0"/>
        <omgdi:waypoint x="5.0" y="-30.0"/>
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="edge-001c12ef-9f1d-4ba6-a44b-aca38a37d2e0" bpmnElement="sid-979c8e38-770a-48d9-a2cf-7ac1813f956d">
        <omgdi:waypoint x="105.0" y="-30.0"/>
        <omgdi:waypoint x="185.0" y="-30.0"/>
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>
      `
        }
    },

    methods: {

        init() {
          // 获取到属性ref为“canvas”的dom节点
          const canvas = this.$refs.canvas
          // 建模
          this.bpmnModeler = new BpmnModeler({
            container: canvas
          })
          this.testdownloadDeployStream();
          this.createNewDiagram()
        },

        createNewDiagram() {
          // 将字符串转换成图显示出来
          this.bpmnModeler.importXML(this.xmlStr).then(()=>{
            console.log("success");
          })
        },

        testdownloadDeployStream() {
          downloadDeployStream('1910986565719437314').then(res => {
            let blob = new Blob([res], {
              type: 'application/xml'
            });

            //将Blob 对象转换成字符串
            let reader = new FileReader();
            reader.readAsText(blob, 'utf-8');
            reader.onload = function (e) {
              console.info('onload');
              
              this.xmlStr = '`' +reader.result + '`';

              console.info(this.xmlStr);
            }
            
          })
        },
    }
}
</script>

<style scoped>
.containers{
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}

.canvas{
	width: 100%;
	height: 100%;
}
</style>
